---
title: Types
description: True Native Bottom Sheet type reference.
keywords: [bottom sheet types, bottom sheet typescript, bottom sheet definitions]
---

## `SheetDetent`

```tsx
<TrueSheet detents={['auto', 0.8, 1]}>
  <View />
</TrueSheet>
```

| Value | Description | 🍎 | 🤖 |
| - | - | - | - |
| `"auto"` | Auto resize based on content height. | **_16+_** | ✅ |
| `number` | Fractional height (0-1) representing percentage of screen height. | ✅ | ✅ |

## `BlurTint`

Blur tint that is mapped into native values in IOS.

```tsx
<TrueSheet blurTint="dark">
  <View />
</TrueSheet>
```

| Value |
| - |
| `"light"` |
| `"dark"` |
| `"default"` |
| `"extra-light"` |
| `"regular"` |
| `"prominent"` |
| `"system-ultra-thin-material"` |
| `"system-thin-material"` |
| `"system-material"` |
| `"system-thick-material"` |
| `"system-chrome-material"` |
| `"system-ultra-thin-material-light"` |
| `"system-thin-material-light"` |
| `"system-material-light"` |
| `"system-thick-material-light"` |
| `"system-chrome-material-light"` |
| `"system-ultra-thin-material-dark"` |
| `"system-thin-material-dark"` |
| `"system-material-dark"` |
| `"system-thick-material-dark"` |
| `"system-chrome-material-dark"` |

## `BlurOptions`

Options for customizing the blur effect. Only applies when `blurTint` is set.

```tsx
<TrueSheet
  blurTint="dark"
  blurOptions={{
    intensity: 80,
    interaction: false,
  }}
>
  <View />
</TrueSheet>
```

| Property | Type | Description | Default |
| - | - | - | - |
| `intensity` | `number` | The intensity of the blur effect (0-100). | _system default_ |
| `interaction` | `boolean` | Enables or disables user interaction on the blur view. Disabling can help with visual artifacts on iOS 18+. | `true` |

## `GrabberOptions`

Options for customizing the grabber (drag handle) appearance.

```tsx
<TrueSheet
  grabber
  grabberOptions={{
    width: 48,
    height: 6,
    topMargin: 10,
    cornerRadius: 3,
    color: '#FF0000',
  }}
>
  <View />
</TrueSheet>
```

| Property | Type | Description | Default |
| - | - | - | - |
| `width` | `number` | The width of the grabber pill. | iOS: `36`, Android: `32` |
| `height` | `number` | The height of the grabber pill. | iOS: `5`, Android: `4` |
| `topMargin` | `number` | The top margin from the sheet edge. | iOS: `5`, Android: `16` |
| `cornerRadius` | `number` | The corner radius of the grabber pill. | `height / 2` |
| `color` | `ColorValue` | The color of the grabber. Uses native styling when not provided. | |

## `InsetAdjustment`

Controls how the bottom safe area inset affects detent heights.

```tsx
<TrueSheet insetAdjustment="never">
  <View />
</TrueSheet>
```

| Value | Description |
| - | - |
| `"automatic"` | System handles insets automatically. This is the default behavior. |
| `"never"` | TrueSheet will keep the layout as-is for precise sizing. |

## `DetentInfoEventPayload`

`Object` that comes with most sheet events.

```tsx
{
  index: 1,
  position: 123.5,
  detent: 0.5
}
```

| Property | Type | Description |
| - | - | - |
| index | `number` | The detent index from the provided detents. See `detents` prop. |
| position | `number` | The Y position of the sheet relative to the screen. |
| detent | `number` | The detent value (0-1) for the current index. |

## `PositionChangeEventPayload`

`Object` that comes with the `onPositionChange` event. Extends [`DetentInfoEventPayload`](#detentinfoeventpayload).

```tsx
{
  index: 1.5,
  position: 123.5,
  detent: 0.5,
  realtime: true
}
```

| Property | Type | Description |
| - | - | - |
| index | `number` | The interpolated detent index. Continuous value that smoothly transitions between detents (e.g., `0.5` means halfway between detent 0 and 1). |
| position | `number` | The Y position of the sheet relative to the screen. |
| detent | `number` | The detent value (0-1) for the nearest detent index. |
| realtime | `boolean` | Whether the position is a real-time value (e.g., during drag or animation tracking). When `false`, position should be animated in JS. |
